﻿@{
    ViewBag.Title = "群聊";
    Layout = "~/Areas/Basic/Views/Shared/_Layout.cshtml";
}

<h2>@ViewBag.Title</h2>

<div class="container">
    <p>
        <input type="text" id="message" />
        <input type="button" id="sendmessage" value="Send" />
    </p>
    <p>
        <input type="text" id="toname" />
        <input type="text" id="privatemessage" />
        <input type="button" id="sendprivatemessage" value="Send Private" />
    </p>
    <ul id="discussion"></ul>
</div>

@section scripts {
    <!--Script references. -->
    <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
    <!--Reference the SignalR library. -->
    <!--
    <script src="~/Scripts/jquery.signalR-2.0.0.min.js"></script>-->
    @Scripts.Render("~/bundles/signalR");
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="~/signalr/hubs"></script>
    <!--SignalR script to update the chat page and send messages.-->
    <script>
        $(function () {
            // Reference the auto-generated proxy for the hub.
            var chat = $.connection.chatHub;
            // Create a function that the hub can call back to display messages.
            chat.client.receivePublic = function (name, message) {
                // Add the message to the page.
                $('#discussion').append('<li><strong><font color="orange">[群聊]</font>' + htmlEncode(name)
                    + '</strong>: ' + htmlEncode(message) + '</li>');
            };

            chat.client.receivePrivate = function (name, message) {
                // Add the message to the page.
                $('#discussion').append('<li><strong><font color="red">[私聊]</font>' + htmlEncode(name)
                    + '</strong>: ' + htmlEncode(message) + '</li>');
            };

            // Set initial focus to message input box.
            $('#message').focus();
            // Start the connection.
            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {
                    // Call the Send method on the hub.
                    chat.server.sendPublic($('#message').val());
                    // Clear text box and reset focus for next comment.
                    $('#message').val('').focus();
                });
                $('#sendprivatemessage').click(function () {
                    // Call the Send method on the hub.
                    chat.server.sendPrivate($('#toname').val(), $('#privatemessage').val());
                    // Clear text box and reset focus for next comment.
                    $('#privatemessage').val('').focus();
                });
            });
        });
        // This optional function html-encodes messages for display in the page.
        function htmlEncode(value) {
            var encodedValue = $('<div />').text(value).html();
            return encodedValue;
        }
    </script>
}

